<template>
  <div class="box">
    <van-nav-bar
      title="影院地图"
      left-arrow
      class="cinema-title"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 地图 -->
    <div class="mask">
      <div id="allmap"></div>
    </div>

    <!-- 轮播 -->
    <swiper ref="mySwiper" :options="swiperOptions" class="banner">
      <swiper-slide v-for="item in list" :key="item.id" class="banner-box">
        <div class="banner-card">
          <img :src="item.img" alt class="img1" />
          <p class="p1">{{item.title}}</p>
          <!-- <img :src="item.share" alt class="img3" /> -->
          <img :src="item.tel" alt class="img2" />
          <p class="p3">{{item.time}}</p>
          <p class="p2">{{item.look}}</p>
        </div>
      </swiper-slide>
      <swiper-slide></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import img2 from "@/assets/images/address/map2.png";
import img1 from "@/assets/images/address/map1.png";
import tel from "@/assets/images/address/tel.png";
// import share from "@/assets/images/address/share.png";
// import share from "@/assets/images/seat/share.png";
export default {
  data() {
    return {
      list: [
        {
          id: Math.random(),
          title: "耀莱成龙影城 (建业店)",
          tel: tel,
          img: img1,
          time: "45min",
          look: "查看"
        },
        {
          id: Math.random(),
          title: "耀莱成龙影城 (建业店)",
          tel: tel,
          img: img2,
          time: "36min",
          look: "查看"
        },
        {
          id: Math.random(),
          title: "耀莱成龙影城 (建业店)",
          tel: tel,
          img: img1,
          time: "50min",
          look: "查看"
        },
        {
          id: Math.random(),
          title: "耀莱成龙影城 (建业店)",
          tel: tel,
          img: img2,
          time: "20min",
          look: "查看"
        }
      ],
      swiperOptions: {
        slidesPerView: 1.8,
        spaceBetween: 6,
        //  centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(113.775289, 34.776318);
    map.centerAndZoom(point, 15);
    var json_data = [
      [113.778397, 34.767263],
      [113.764495, 34.77511],
      [113.760844, 34.778127]
    ];
    var pointArray = new Array();
    for (var i = 0; i < json_data.length; i++) {
      var marker = new BMap.Marker(
        new BMap.Point(json_data[i][0], json_data[i][1])
      ); // 创建点
      map.addOverlay(marker); //增加点
      pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
      marker.addEventListener("click", attribute);
    }
    //让所有点在视野范围内
    map.setViewport(pointArray);
    //获取覆盖物位置
    function attribute(e) {
      var p = e.target;
      // alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    }
  }
};
</script>

<style lang="scss">
</style>
<style scoped lang="scss">
.van-nav-bar__title {
  color: #ffffff;
}
.van-icon {
  color: #ffffff !important;
}
.van-nav-bar {
  background: #33363d;
  .van-nav-bar__title {
    background: #33363d;
  }
}
.van-nav-bar__text {
  color: #ffffff;
}
.van-nav-bar .van-icon {
  color: #ffffff !important;
}

html,
body {
  height: 100%;
  background-color: #22262d;
}
.box {
  height:100%;
}
.swiper-pagination {
  position: static;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  // transform: translateY(50px);
  z-index: 98;
}
.swiper-pagination-bullet {
  background-color: #fff;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.9);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(0.9);
}
#allmap {
  width: 100%;
  height: 100%;
}
.cinema-title {
  background-color: #33363d !important;
}
.mask {
  width: 100%;
  height: 667px;
  // background-color:black;
  opacity: 0.8;
}

.banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 375px!important;
  height: 180px;
  z-index: 36;
}
.banner-box {
  margin-left: 5px;
  width: 203px!important;
  height: 194px;
  background-color: #33363d;
  box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.19);
  border-radius: 6px;
  .banner-card {
    width: 203px;
    height: 100%;
    img {
      width: 100%!important;
      height: 72%;
    }
    .p1 {
      font-size: 12px;
      color: #ffffff;
      text-align: left;
      transform: translate(8px, 2px);
    }
    .img2 {
      width: 16px!important;
      height: 19px;
      transform: translate(-55px, 10px);
    }
    .img3 {
      width: 17px;
      height: 17px;
      transform: translate(-70px, 10px);
    }
    .p2 {
      color: #ffffff;
      font-size: 12px;
      width: 45px;
      height: 25px;
      background: linear-gradient(
        150deg,
        rgba(242, 91, 134, 1) 0%,
        rgba(241, 172, 94, 1) 100%
      );
      box-shadow: 0px 0px 4px 1px rgba(242, 109, 125, 0.18);
      border-radius: 6px;
      transform: translate(150px, -50px);
      line-height: 25px;
    }
    .p3 {
      color: #ffffff;
      font-size: 12px;
      transform: translate(12px, -15px);
      line-height: 25px;
    }
  }
}
</style>
